<template>
    <div>
        <el-dialog title="所有图片" :visible.sync="showImage" width=40% append-to-body>
            <div class="imageList">
                <img class="image" v-for="(item,idnex) in imageList" :key="idnex+'img'" :src="item"/>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
    name: 'RuoyiUiImageList',

    data() {
        return {
            showImage: false,
            imageList:[
                'https://images-fe.ssl-images-amazon.com/images/I/71ZdCB60LRL._AC_UL160_SR160,160_.jpg',
                'https://m.media-amazon.com/images/I/71UCQJi-rML._AC_SX522_.jpg',
                'https://images-fe.ssl-images-amazon.com/images/I/61YTym7-JoL._AC_UL160_SR160,160_.jpg',
                'https://m.media-amazon.com/images/I/71UCQJi-rML._AC_SX522_.jpg',
                'https://images-fe.ssl-images-amazon.com/images/I/61YTym7-JoL._AC_UL160_SR160,160_.jpg',
                'https://m.media-amazon.com/images/I/71UCQJi-rML._AC_SX522_.jpg',
                'https://images-fe.ssl-images-amazon.com/images/I/61YTym7-JoL._AC_UL160_SR160,160_.jpg',
                'https://images-fe.ssl-images-amazon.com/images/I/71ZdCB60LRL._AC_UL160_SR160,160_.jpg',
                'https://m.media-amazon.com/images/I/71UCQJi-rML._AC_SX522_.jpg',
                'https://images-fe.ssl-images-amazon.com/images/I/61YTym7-JoL._AC_UL160_SR160,160_.jpg',
                'https://images-fe.ssl-images-amazon.com/images/I/71ZdCB60LRL._AC_UL160_SR160,160_.jpg',
                'https://m.media-amazon.com/images/I/71UCQJi-rML._AC_SX522_.jpg',
            ],
        };
    },

    mounted() {

    },

    methods: {

    },
};
</script>

<style lang="scss" scoped>
.imageList{
    display: flex;
  flex-wrap: wrap;
    .image{
        width: 17%;
        margin: 4px 10px;
    }
}
</style>